<template>
	<view class="zc">
		<view style="width: 94%;margin: 0 auto;">
			<view style="height: 15px;"></view>
			<view class="zctitle">
				<view class="star"></view>
				<view class="star star1"></view>
				<view class="star star2"></view>
				<view class="star star3"></view>
				<view class="star star4"></view>
				<view class="star star5"></view>
				<view class="star star6"></view>
				<view class="star star7"></view>
				<view class="star star8"></view>
				<view class="star star9"></view>
				<view class="star star10"></view>
				<view class="star star11"></view>
				<view class="star star12"></view>
				<view class="star star13"></view>
				<view class="star star14"></view>
				<view class="star star15"></view>
				注册

			</view>
			<view style="height: 15px;"></view>
			<uni-forms ref="form" :modelValue="formData" :rules="rules">
				<uni-forms-item name="phone">
					<view style="color: white;font-size: 20px;">手机号</view>
					<uni-easyinput type="text" v-model="formData.phone" placeholder="请输入手机号" />
				</uni-forms-item>
				<uni-forms-item name="yzm">
					<view style="color: white;font-size: 20px;">验证码</view>
					<view style="width: 40%;float: left;"><uni-easyinput type="text" v-model="formData.yzm"
							placeholder="填写验证码" /></view>
					<view v-if="showyzm"><button @click="yzmdsq"
							style="width: 45%;float: left;height: 40px;line-height: 40px;font-size: 15px; margin-left: 20px;background-color: rgb(0, 119, 255);color: aliceblue;">获取验证码</button>
					</view>
					<view v-else><button
							style="width: 45%;float: left;height: 40px;line-height: 40px;font-size: 15px; margin-left: 20px;background-color: rgb(0, 119, 255);color: aliceblue;"
							disabled>{{ num }}秒后重新获取</button></view>
				</uni-forms-item>
				<uni-forms-item name="password">
					<view style="color: white;font-size: 20px;">设密码</view>
					<uni-easyinput type="password" v-model="formData.password" placeholder="至少8位字母和数字的组合" />
				</uni-forms-item>

			</uni-forms>
			<view></view>
			<button class="zcbtn" @click="submitForm">注册</button>
			<navigator url="../login/login" open-type="redirect" hover-class="other-navigator-hover">
				<view style="margin-top: 10px;color: rgb(0, 162, 255);;float: right;">
					已注册，直接登录
				</view>
			</navigator>

		</view>
		<view class="star"></view>
		<view class="star star1"></view>
		<view class="star star2"></view>
		<view class="star star3"></view>
		<view class="star star4"></view>
		<view class="star star5"></view>
		<view class="star star6"></view>
		<view class="star star7"></view>
		<view class="star star8"></view>
		<view class="star star9"></view>
		<view class="star star10"></view>
		<view class="star star11"></view>
		<view class="star star12"></view>
		<view class="star star13"></view>
		<view class="star star14"></view>
		<view class="star star15"></view>


	</view>
</template>

<script>
export default {
	data() {
		return {
			// 验证码数字
			num: 10,
			// 验证码
			allyzm: '',
			// 验证码显示
			showyzm: true,
			formData: {
				phone: "",
				yzm: "",
				password: "",
			},
			rules: {
				phone: {
					rules: [{
						required: true,
						errorMessage: '请输入手机号',
					},
					{
						minLength: 11,
						maxLength: 11,
						errorMessage: '手机号长度应该为{maxLength}',
					}
					]
				},
				yzm: {
					rules: [{
						required: true,
						errorMessage: '请输入验证码',
					}]
				},
				password: {
					rules: [{
						required: true,
						errorMessage: '请输入密码',
					}]
				}
			}
		};
	},
	methods: {
		// from表单
		submitForm() {
			this.$refs.form.validate().then(res => {
				// console.log('表单数据信息：6666', res);
				// console.log(this.formData.yzm);
				// console.log(this.allyzm);
				if (Number(this.allyzm) === Number(this.formData.yzm)) {
					let obj = {
						username: this.formData.phone,
						nickname: this.formData.phone,
						phone: this.formData.phone,
						password: this.formData.password
					}
					console.log('********', obj);
					uni.request({
						url: 'http://localhost:3366/gzj/register',
						data: obj,
						// header: {
						//     // 'Content-Type': 'application/x-www-form-urlencoded'
						//     'Content-Type': 'application/json' //自定义请求头信息
						// },
						method: 'POST', //请求方式，必须为大写
						success: (res) => {
							// let bb = md5.hex_md5('我爱中国')
							// console.log(res.data);
							// 跳转
							uni.navigateTo({
								url: '../login/login'
							});
						}
					})
				} else {
					uni.showToast({
						title: "验证码错误"
					})
				}


			}).catch(err => {
				console.log('表单错误信息：', err);
			})
		},
		// 验证码定时器
		yzmdsq() {
			// axios.post('http://localhost:3366/gzj/logincode22').then(v=>{
			//     console.log(v.data);
			// })
			uni.request({
				url: 'http://localhost:3366/gzj/logincode22',
				// data: {//参数
				//     type: 2,
				//     id: 1,
				// },
				header: {
					// 'Content-Type': 'application/x-www-form-urlencoded'
					'Content-Type': 'application/json' //自定义请求头信息
				},
				method: 'POST', //请求方式，必须为大写
				success: (res) => {
					// console.log('接口返回------', res.data);
					this.allyzm = res.data.num
					console.log(this.allyzm);
				}
			})


			let a = setInterval(() => {

				this.showyzm = false
				this.num--
				if (this.num < 1) {
					clearInterval(a)
					this.num = 10
					this.showyzm = true
				}
			}, 1000)
		},


	}
}
</script>

<style lang="scss" scoped>
.zc {
	width: 100vw;
	height: 100vh;
	background: url('https://img1.baidu.com/it/u=3867574171,2713226701&fm=253&fmt=auto&app=120&f=JPEG?w=251&h=500') center center no-repeat;
	background-size: 100vw 100vh;
	margin: 0 auto;
	overflow: hidden;
}

.zctitle {
	width: 100%;
	height: 100px;
	text-align: center;
	line-height: 200px;
	font-size: 25px;
	color: white;
	margin-bottom: 10px;
	// background: url('https://img0.baidu.com/it/u=309501942,3694933271&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500') center center no-repeat;
	background-size: 400px;
	border-radius: 20px;
}

.zcbtn {
	background-color: rgb(0, 119, 255);
	color: aliceblue;
}

.zc .star {
	display: block;
	width: 0px;
	height: 0px;
	border-radius: 50%;
	background: #fff;
	top: -50px;
	left: 200px;
	position: relative;
	transform-origin: 100% 0;
	animation: star-ani 6s infinite ease-out;
	box-shadow: 0 0 0px 0px rgba(255, 255, 255, .3);
	opacity: 0;
	z-index: 2;
}

.zc .star:after {
	content: '';
	display: block;
	top: -10px;
	left: 200px;
	border: 0px solid #fff;
	border-width: 0px 90px 3px 90px;
	border-color: transparent transparent transparent #fff;
	transform: rotate(-45deg) translate3d(1px, 3px, 0);
	box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);
	transform-origin: 0% 100%;
	animation: shooting-ani 1s infinite ease-out;
}




.zc .star1 {
	top: -10px;
	left: 300px;
	background: #fff;
	animation-delay: 0.5s;
	-webkit-animation-delay: 0.5s;
	-moz-animation-delay: 0.5s;
}

.zc .star1:after {
	border-color: transparent transparent transparent #fff;
	animation-delay: 0.5s;
	-webkit-animation-delay: 0.5s;
	-moz-animation-delay: 0.5s;
}

.zc .star2 {
	top: 100px;
	left: 200px;
	background: #fff;
	animation-delay: 0s;
	-webkit-animation-delay: 0s;
	-moz-animation-delay: 0s;
}

.zc .star2:after {
	border-color: transparent transparent transparent #fff;
	animation-delay: 0;
	-webkit-animation-delay: 0s;
	-moz-animation-delay: 0s;
}

.zc .star3 {
	top: -10px;
	left: 100px;
	background: #fff;
	animation-delay: 1.5s;
	-webkit-animation-delay: 1.5s;
	-moz-animation-delay: 1.5s;
}

.zc .star3:after {
	border-color: transparent transparent transparent #fff;
	animation-delay: 1.5s;
	-webkit-animation-delay: 1.5s;
	-moz-animation-delay: 1.5s;
}

.zc .star4 {
	top: 100px;
	left: 250px;
	background: #fff;
	animation-delay: 1.5s;
	-webkit-animation-delay: 1.5s;
	-moz-animation-delay: 1.5s;
}

.zc .star4:after {
	border-color: transparent transparent transparent #fff;
	animation-delay: 1.5s;
	-webkit-animation-delay: 1.5s;
	-moz-animation-delay: 1.5s;
}

.zc .star5 {
	top: 200px;
	left: 250px;
	background: #fff;
	animation-delay: 1.5s;
	-webkit-animation-delay: 1.5s;
	-moz-animation-delay: 1.5s;
}

.zc .star5:after {
	border-color: transparent transparent transparent #fff;
	animation-delay: 1.5s;
	-webkit-animation-delay: 1.5s;
	-moz-animation-delay: 1.5s;
}

.zc .star6 {
	top: -10px;
	left: 100px;
	background: #fff;
	animation-delay: 1.5s;
	-webkit-animation-delay: 1.5s;
	-moz-animation-delay: 1.5s;
}

.zc .star6:after {
	border-color: transparent transparent transparent #fff;
	animation-delay: 1.5s;
	-webkit-animation-delay: 1.5s;
	-moz-animation-delay: 1.5s;
}


.zc .star7 {
	top: 100px;
	left: 200px;
	background: #fff;
	animation-delay: 3s;
	-webkit-animation-delay: 3s;
	-moz-animation-delay: 3s;
}

.zc .star7:after {
	border-color: transparent transparent transparent #fff;
	animation-delay: 3s;
	-webkit-animation-delay: 3s;
	-moz-animation-delay: 3s;
}

.zc .star13 {
	top: -10px;
	left: 210px;
	background: #fff;
	animation-delay: 3s;
	-webkit-animation-delay: 3s;
	-moz-animation-delay: 3s;
}

.zc .star13:after {
	border-color: transparent transparent transparent #fff;
	animation-delay: 3s;
	-webkit-animation-delay: 3s;
	-moz-animation-delay: 3s;
}

.zc .star14 {
	top: -100px;
	left: 150px;
	background: #fff;
	animation-delay: 2s;
	-webkit-animation-delay: 2s;
	-moz-animation-delay: 2s;
}

.zc .star14:after {
	border-color: transparent transparent transparent #fff;
	animation-delay: 2s;
	-webkit-animation-delay: 2s;
	-moz-animation-delay: 2s;
}


.zc .star15 {
	top: 200px;
	left: 250px;
	background: #fff;
	animation-delay: 2.5s;
	-webkit-animation-delay: 2.5s;
	-moz-animation-delay: 2.5s;
}

.zc .star15:after {
	border-color: transparent transparent transparent #fff;
	animation-delay: 2.5s;
	-webkit-animation-delay: 2.5s;
	-moz-animation-delay: 2.5s;
}

.zc .star8 {
	top: -10px;
	left: 100px;
	background: #fff;
	animation-delay: 3s;
	-webkit-animation-delay: 3s;
	-moz-animation-delay: 3s;
}

.zc .star8:after {
	border-color: transparent transparent transparent #fff;
	animation-delay: 3s;
	-webkit-animation-delay: 3s;
	-moz-animation-delay: 3s;
}

.zc .star9 {
	top: 100px;
	left: 250px;
	background: #fff;
	animation-delay: 4s;
	-webkit-animation-delay: 4s;
	-moz-animation-delay: 4s;
}

.zc .star9:after {
	border-color: transparent transparent transparent #fff;
	animation-delay: 4s;
	-webkit-animation-delay: 4s;
	-moz-animation-delay: 4s;
}

.zc .star10 {
	top: 200px;
	left: 250px;
	background: #fff;
	animation-delay: 5s;
	-webkit-animation-delay: 5s;
	-moz-animation-delay: 5s;
}

.zc .star10:after {
	border-color: transparent transparent transparent #fff;
	animation-delay: 5s;
	-webkit-animation-delay: 5s;
	-moz-animation-delay: 5s;
}

.zc .star11 {
	top: -10px;
	left: 100px;
	background: #fff;
	animation-delay: 5s;
	-webkit-animation-delay: 5s;
	-moz-animation-delay: 5s;
}

.zc .star11:after {
	border-color: transparent transparent transparent #fff;
	animation-delay: 5s;
	-webkit-animation-delay: 5s;
	-moz-animation-delay: 5s;
}

.zc .star12 {
	top: -10px;
	left: 100px;
	background: #fff;
	animation-delay: 6s;
	-webkit-animation-delay: 6s;
	-moz-animation-delay: 6s;
}

.zc .star12:after {
	border-color: transparent transparent transparent #fff;
	animation-delay: 6s;
	-webkit-animation-delay: 6s;
	-moz-animation-delay: 6s;
}

@keyframes star-ani {
	0% {
		opacity: 0;
		transform: scale(0) rotate(0) translate3d(0, 0, 0);
		-webkit-transform: scale(0) rotate(0) translate3d(0, 0, 0);
		-moz-transform: scale(0) rotate(0) translate3d(0, 0, 0);
	}

	50% {
		opacity: 1;
		transform: scale(1) rotate(0) translate3d(-300px, 300px, 0);
		-webkit-transform: scale(1) rotate(0) translate3d(-300px, 300px, 0);
		-moz-transform: scale(1) rotate(0) translate3d(-300px, 300px, 0);
	}

	100% {
		opacity: 0;
		transform: scale(1) rotate(0) translate3d(-400px, 300px, 0);
		-webkit-transform: scale(1) rotate(0) translate3d(-400px, 400px, 0);
		-moz-transform: scale(1) rotate(0) translate3d(-400px, 400px, 0);
	}
}
</style>